uniapp多功能选择器组件，类似于elementui，可搜索可下拉可清空（基于uView二次封装），支持各端兼容，非常好用！！！

2023-06-13 10:33| 来源: 网络整理| 查看: 265

1.最近在uniapp上做了一款类似elementui的多功能选择器的组件，可下拉可搜索可情况，支持异步请求渲染下拉列表

废话不多说，先看视频！！！！！

uniapp多功能下拉框组件

2.需要的环境

（1）因为组件基于uView二次封装，所以请安装uView组件，安装步骤请看uView官方文档

3.以下代码直接复制

说明：@select方法可以在父组件拿到当前选择项的对象数据

{{inputValCopy}} {{inputValPlaceholder}} {emptyTips}} --> export default { name: 'uniCombox', emits: ['input'], props: { placeholderStyle: { //输入框placeholder状态的样式 type: String, default: 'font-size:15px;color:#C0C4CC' }, selectPosition: { //是否在组件父元素添加定位默认relative type: String, default: 'relative' }, valueKey: { //父组件data数据需要在列表中渲染的key值 type: String, default: 'companyName' }, border: { type: Boolean, //默认显示下边框 default: true }, label: { type: String, //选择器label 不建议使用 default: '' }, labelWidth: { //选择器label宽度不建议使用 type: String, default: 'auto' }, placeholder: { //选择器placeholder文本 type: String, default: '' }, candidates: { //选择器下拉框数据格式为[{}] type: Array, default () { return [] } }, emptyTips: { //选择器下拉框数据为空文本 ---已注释掉需要的可以手动打开 type: String, default: '无匹配项' }, value: { type: [String, Number], default: '' }, myMessage: { //父组件的值 type: [String, Number], default: '' }, }, data() { return { dataList:[], showSelector: false, placeholderCopy: '', inputVal: '', inputValCopy:'', isShowInput:false, inputValPlaceholder:"", input:"" } }, computed: { labelStyle() { if (this.labelWidth === 'auto') { return "" } return `width: ${this.labelWidth}` }, filterCandidates() { return this.candidates }, filterCandidatesLength() { return this.filterCandidates.length } }, watch: { myMessage: { handler(newVal) { if (newVal) { this.inputValCopy = newVal this.inputValPlaceholder = newVal }else{ this.inputValCopy = newVal this.inputValPlaceholder = this.placeholder } }, immediate: true, deep: true }, candidates:{ handler($value){ this.dataList = $value }, deep:true, immediate:true } }, methods: { toggleSelector() { this.showSelector = !this.showSelector }, onFocus() { if(this.inputValCopy){ this.placeholderCopy = this.inputValCopy }else{ this.placeholderCopy = this.placeholder } this.showSelector = true }, onBlur() { setTimeout(() => { this.showSelector = false this.isShowInput = false this.inputVal = '' }, 153) }, onSelectorClick(index) { this.showSelector = false this.isShowInput = false this.$emit('update:myMessage', this.dataList[index][this.valueKey]) this.$emit('select', this.dataList[index]) }, as() { this.$emit('input', this.inputVal) }, scrolltolower() { this.$emit('srolltolower') }, onChange(e) { // this.input = e this.dataList = [] uni.$u.debounce(this.as, 200) } } } .wraper-inpu-text{ display: flex; align-items: center; // justify-content: center; height: 44rpx; width: 100%; flex: 1; & text{ line-height: 26px; } } .wrper-text-vlaue{ font-size: 15px; } .uni-combox { font-size: 14px; // border: 1px solid #DCDFE6; border-radius: 4px; // padding: 6px 10px; position: relative; /* #ifndef APP-NVUE */ display: flex; /* #endif */ // height: 40px; flex-direction: row; align-items: center; width: 100% !important; // border-bottom: solid 1px #DDDDDD; } .uni-combox__label { font-size: 16px; line-height: 22px; padding-right: 10px; color: #999999; } .uni-combox__input-box { position: relative; /* #ifndef APP-NVUE */ display: flex; /* #endif */ flex: 1; flex-direction: row; align-items: center; } .uni-combox__input { flex: 1; font-size: 14px; height: 22px; line-height: 22px; } .uni-combox__input-plac { font-size: 28rpx; text-align: left; color: rgb(180, 180, 180); } .uni-combox__selector { /* #ifndef APP-NVUE */ box-sizing: border-box; /* #endif */ position: absolute; top: calc(100% + 12px); left: 0; width: 100%; background-color: #FFFFFF; border: 1px solid #EBEEF5; border-radius: 6px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); z-index: 2; padding: 4px 0; } .uni-combox__selector-scroll { /* #ifndef APP-NVUE */ max-height: 200px; box-sizing: border-box; /* #endif */ } .uni-combox__selector-empty, .uni-combox__selector-item { /* #ifndef APP-NVUE */ display: flex; cursor: pointer; /* #endif */ line-height: 36px; font-size: 14px; text-align: center; // border-bottom: solid 1px #DDDDDD; padding: 0px 10px; } .uni-combox__selector-item:hover { background-color: #f9f9f9; } .uni-combox__selector-empty:last-child, .uni-combox__selector-item:last-child { /* #ifndef APP-NVUE */ border-bottom: none; /* #endif */ } // picker 弹出层通用的指示小三角 .uni-popper__arrow, .uni-popper__arrow::after { position: absolute; display: block; width: 0; height: 0; border-color: transparent; border-style: solid; border-width: 6px; } .uni-popper__arrow { filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03)); top: -6px; left: 10%; margin-right: 3px; border-top-width: 0; border-bottom-color: #EBEEF5; } .uni-popper__arrow::after { content: " "; top: 1px; margin-left: -6px; border-top-width: 0; border-bottom-color: #fff; } .uni-combox__no-border { border: none; } ::v-deep .u-list { min-height: 0 !important; max-height: 350rpx !important; height: auto !important; }

4.使用

（1）引入该组件

（2）父组件写法

5.创作不易，点个赞再走吧，不懂的老铁可以私我

【本文地址】

公司简介

联系我们